1 00:00:00,720 --> 00:00:01,700 Hello and welcome. 2 00:00:01,710 --> 00:00:10,330 In this lecture we are going to create functionality for our image slider using javascript. 3 00:00:12,370 --> 00:00:12,810 All right. 4 00:00:12,820 --> 00:00:15,620 So this is my blank scrip file. 5 00:00:15,660 --> 00:00:17,820 So we're what I'm going to do. 6 00:00:17,860 --> 00:00:20,090 I've already pre written the code. 7 00:00:20,350 --> 00:00:25,540 I'm just going to add a code and explain what the code does. 8 00:00:26,590 --> 00:00:33,300 So I had the code that will create the functionality for this Slider. 9 00:00:33,670 --> 00:00:37,080 So there are three functions here. 10 00:00:37,220 --> 00:00:41,100 We've got the first function here. 11 00:00:41,110 --> 00:00:47,500 Sorry two functions go function here called plaze Dave's and we go from here. 12 00:00:47,650 --> 00:00:48,510 Sure did. 13 00:00:48,670 --> 00:00:58,300 So I started off on line one by defining a variable called Slide index and I've set the value to one 14 00:00:59,380 --> 00:01:00,280 line two. 15 00:01:00,360 --> 00:01:03,030 I have called the function. 16 00:01:03,370 --> 00:01:12,520 This function here calls should d the end there means whatever value you pass in and I've passed it. 17 00:01:12,580 --> 00:01:19,570 This light Index which has this slide index the value values once I've passed it one here. 18 00:01:19,610 --> 00:01:29,920 Write line for those quoted function call plus div and inside the parenthesis were parsee n that n represents 19 00:01:30,010 --> 00:01:31,150 a value. 20 00:01:31,440 --> 00:01:36,140 Ah could be an integer value could be one to whatever. 21 00:01:36,420 --> 00:01:47,470 Okay and that function this function here code plus the also takes seem this parameter SQL what this 22 00:01:47,470 --> 00:01:56,910 function does it all this function plus the calls this function as well so this function should do is 23 00:01:56,920 --> 00:01:58,470 being called from here. 24 00:01:58,750 --> 00:02:05,560 So we want a qualifying job you just type in the name and then you parsee the parrot Param if s passed 25 00:02:05,580 --> 00:02:14,290 its slide index which is this variable here of 1 plus or equal to use in this proton plus a week was 26 00:02:14,290 --> 00:02:15,370 to N. 27 00:02:15,580 --> 00:02:19,190 So to be plausible equal to whatever that n represents. 28 00:02:19,300 --> 00:02:23,160 Okay so N could be a number two three if once or K. 29 00:02:23,200 --> 00:02:26,410 That's why the Super Bowl will always send a whatever's slide. 30 00:02:26,410 --> 00:02:35,290 No you passed since always start with a slide number one to an ADD slag Member 2 and so on thus what 31 00:02:35,290 --> 00:02:45,400 that n represents the function on line 8 to 17 what that function shule gives. 32 00:02:45,460 --> 00:02:47,900 Remember the images are indeed. 33 00:02:48,100 --> 00:02:55,660 So I said sure D and have passed it in passed down to the parentheses an n value. 34 00:02:56,050 --> 00:02:58,560 So we've got a variable called Hi. 35 00:02:58,780 --> 00:03:09,190 This I will act as a counter variable on line 10 core variable x and I've set it to cause to a document 36 00:03:09,200 --> 00:03:17,230 a get elemen by class name k. and the class name up past did my slides remember if I go to the hastier 37 00:03:17,230 --> 00:03:20,170 mail world class chord slides. 38 00:03:20,200 --> 00:03:24,670 Okay so that's what that's referring to. 39 00:03:24,670 --> 00:03:29,760 I have times touchstone if statement on line 11 seen that. 40 00:03:29,860 --> 00:03:39,220 If the value of N N Q represent any number have got 7 image images so the N could represent any of those 41 00:03:39,220 --> 00:03:39,820 numbers. 42 00:03:40,030 --> 00:03:52,090 So if n is greater than these variable x does let that is greater than the length or variable x then 43 00:03:52,870 --> 00:03:58,200 the slide index is equal to one which is is variable here. 44 00:03:58,860 --> 00:04:00,880 If this N.. 45 00:04:01,210 --> 00:04:04,470 Okay the N and kahrizak again n n number. 46 00:04:04,730 --> 00:04:09,800 If the variable n n is less than 1. 47 00:04:11,640 --> 00:04:15,200 Displayed in death equals to hecks riches is variable. 48 00:04:15,270 --> 00:04:24,920 Nineteen dollars meant saying that online 13 is a counter saying that for every Were our sequence to 49 00:04:24,930 --> 00:04:29,620 zero is less than X does Lent. 50 00:04:30,000 --> 00:04:41,010 Then I should increase by 1 so every time the value of i is set to zero and then R is less than the 51 00:04:41,010 --> 00:04:43,740 length of the variable X.. 52 00:04:43,920 --> 00:04:47,890 Don't increase it by 1 plus blogs means increase. 53 00:04:48,070 --> 00:04:56,060 You keep increasing the number of lies as you flugge TRUE on till it gets to the last one and then by 54 00:04:56,070 --> 00:05:02,120 14 saying if X. Okay parsee X into an array. 55 00:05:02,170 --> 00:05:04,990 If X helped. 56 00:05:05,060 --> 00:05:09,100 I don't see how to split is none. 57 00:05:09,150 --> 00:05:11,970 That is if there is no display displays none. 58 00:05:12,330 --> 00:05:23,440 Then say X dots flat index minus one dot style display equals block then display the images as block. 59 00:05:23,520 --> 00:05:24,840 That's what that say. 60 00:05:25,140 --> 00:05:32,880 So this is the style in the script that queer's dysfunctionality for our slide. 61 00:05:33,210 --> 00:05:39,200 So I'll save that now run the code and see what it looks like. 62 00:05:39,570 --> 00:05:40,800 So after. 63 00:05:40,820 --> 00:05:46,650 That should work correctly now so if I click on this I should be able to Flutey you can see here the 64 00:05:46,650 --> 00:05:49,240 images are of the same size. 65 00:05:49,320 --> 00:05:51,860 Okay so I can keep looking through. 66 00:05:51,870 --> 00:05:52,940 I can also move. 67 00:05:52,950 --> 00:05:56,030 Go back one and go back to to. 68 00:05:56,180 --> 00:06:00,010 These are all the seven images added to the slide. 69 00:06:00,490 --> 00:06:01,700 So thanks for watching. 70 00:06:01,710 --> 00:06:04,730 I hope the project has been useful. 71 00:06:04,920 --> 00:06:08,470 If you've got any questions please feel free to ask. 72 00:06:08,700 --> 00:06:09,940 Thank you. 73 00:06:09,950 --> 00:06:11,020 Bye for now.